<template>
  <div id="totalLeftTop">
    <div class="d-flex jc-between" style="height: 100%; align-items: flex-start;">
      <div class="list_sty d-flex jc-center tltbox animate__animated animate__zoomIn" v-for="(item, index) in caseList"
        :key="index">
        <div class="l-t-title">{{ item.label }}</div>
        <div class="l-t-value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getServiceStationCount, getIotProjectCount } from '@/api/ops/dashboard'

export default {
  data() {
    return {
      myChart: null,
      options: {},
      caseList: [
        { label: '签约总数', value: 5347 },
        { label: '服务站', value: 4356 },
        { label: '物联项目', value: 4678 },
      ],
    };
  },
  computed: {
    regionId() {
      return this.$store.state.settings.project.regionId;
    },
  },
  watch: {
    regionId: {
      handler(val, oldVal) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getServiceStationCount();
      this.getIotProjectCount();
    },
    // 获取服务站数量
    getServiceStationCount() {
      console.log(777777777, this.regionId);
      getServiceStationCount({ regionId: this.regionId }).then((response) => {
        if (response.code == 200 && response.data != null) {
          this.caseList[1].value = response.data;
        }
      });
    },
    // 获取物联项目数量
    getIotProjectCount() {
      getIotProjectCount({ regionId: this.regionId }).then((response) => {
        if (response.code == 200 && response.data != null) {
          this.caseList[2].value = response.data;
        }
      });
    },
  },
};
</script>

<style lang="scss">
#totalLeftTop {
  height: 100%;

  .tltbox {
    // background-image: url("~@/assets/background/btbg.svg");
    width: 100%;
    // background-size: cover;
    flex-direction: column;
    align-items: center;
    width: 32%;
    height: 100%;
    justify-content: flex-start;
    border-radius: 4px;
    box-shadow: rgba(29, 72, 196, 0.4) 0px 0px 25px 3px inset;

    .l-t-title {
      // background-image: url("~@/assets/background/btbg.svg");
      width: 100%;
      // background-size: cover;
      height: 0.4608rem;
      line-height: 0.4608rem;
      text-align: center;
      color: #fff;
      background-image: linear-gradient(to right, transparent, #0159ba, transparent);
    }

    .l-t-value {
      // background-image: url("~@/assets/background/content.svg");
      width: 100%;
      // background-size: cover;
      flex: 1;
      justify-content: center;
      display: flex;
      align-items: center;
      font-size: 0.4rem;
      color: #fff;
      position: relative;

      &::after {
        content: '';
        width: 70%;
        position: absolute;
        height: 2px;
        background-image: linear-gradient(to right, transparent, #0159ba, transparent);
        z-index: -9;
      }
    }
  }
}
</style>
